<template>
	<div>
		<br>
		<br>
		<button @click="startRecording">开始录音</button>
		<br>
		<button @click="stopRecording">停止录音</button>
		<br>
		<button @click="playRecording">播放录音</button>

		<audio :src="recordedAudio" controls></audio>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				audioChunks: [], // 存储录音数据的数组
				mediaRecorder: null, // MediaRecorder 对象，用于录音
				recordedAudio: null // 录制完成后的音频文件对象
			};
		},
		methods: {
			// 触发录音
			startRecording() {
				// 检查浏览器是否支持获取媒体设备的 API
				if (navigator && navigator.mediaDevices) {
					// 请求获取麦克风音频数据
					navigator.mediaDevices.getUserMedia({
							audio: true
						})
						.then(stream => {
							this.audioChunks = []; // 清空录音数据数组
							this.mediaRecorder = new MediaRecorder(stream); // 创建 MediaRecorder 对象，用于录制音频
							// 监听录音数据可用事件，将录音数据存入数组
							this.mediaRecorder.ondataavailable = e => {
								this.audioChunks.push(e.data);
							};
							this.mediaRecorder.onstop = () => {
								const blob = new Blob(this.audioChunks, {
									type: 'audio/mp3' // 创建 Blob 对象，指定录音数据的类型为 mp3
								});
								// 通过 URL.createObjectURL 方法将录音数据转换为可播放的 URL
								this.recordedAudio = URL.createObjectURL(blob);
							};
							// 开始录音
							this.mediaRecorder.start();
						})
						.catch(err => {
							console.error('	获取麦克风失败', err);
						});
				} else {
					console.error("浏览器不支持获取媒体设备或者没有麦克风");
				}
			},
			// 录音暂停
			stopRecording() {
				this.mediaRecorder.stop();
			},
			// 播放录音文件
			playRecording() {
				// 检查是否有录音文件可播放
				if (this.recordedAudio) {
					// 创建音频对象
					const audio = new Audio(this.recordedAudio);
					// 播放录音文件
					audio.play();
				}
			}
		}
	};
</script>